.farris-treetable {
    table {
        width: 100%;
        table-layout: fixed;
        margin-bottom: 0;
    }

    .farris-treetable-thead {

        table thead th,
        th {
            .tt-checkbox {
                margin: 0;
                vertical-align: top;
                padding-right: 0px;

                .custom-control-label::before {
                    font-size: $farris-font-size-base;
                    margin: 2px 0 0;
                }
            }

            &:hover {
                background: $farris-grid-header-hover-bg;
            }

            .f-treetable-sort {
                @include f-table-sort;
            }
        }
    }

    .farris-treetable-tbody {
        tr {
            color: $farris-grid-selected-text;

            &.farris-table-selectedrow {
                background-color: $farris-grid-selected-bg;
                color: $farris-grid-selected-text;

                td {
                    border-bottom-color: $farris-grid-selected-border;
                }
            }

            &.f-treetable-disable-row {
                color: $f-text-08;
                background: $f-neutral-14;
            }
        }

        td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            .tt-checkbox {
                margin: 0;
                vertical-align: top;
                padding-right: 0px;
            }

            .treetable-nochild {
                width: 1rem;
                height: 1rem;
                display: inline-block;
                padding-right: 0.375rem;
                vertical-align: middle;
            }

            .treenode-icon {
                width: 1rem;
                height: 1rem;
                display: inline-block;
                background-position: 50% 50%;
                vertical-align: middle;
                background-repeat: no-repeat;
                color: $f-text-08;
            }

            .treetable-toggler,
            .folder,
            .folder-open,
            .file {
                @include f-icon-extend('FarrisExtend');
            }

            .treetable-toggler {
                width: 0.875rem;
                height: 0.875rem;
                font-size: 0.75rem;
                line-height: 0.75rem;
                margin: 0 0.375rem 0 0;
                background: #fff;
                border: 1px solid $f-neutral-02;
                border-radius: 2px;
                text-align: center;

                &::before {
                    font-family: 'FarrisIcons';
                    color: $f-text-02;
                    content: '\e11e';
                    line-height: 1;
                }

                &.extanded::before {
                    content: '\e121';
                }

                //设置图标滑过及点击颜色
                &:hover {
                    border-color: $f-theme-05;

                    &::before {
                        color: $f-theme-05;
                    }
                }

                &:active {
                    border-color: $f-theme-03;

                    &::before {
                        color: $f-theme-03;
                    }
                }
            }

            .folder {
                display: none;

                &::before {
                    font-size: $farris-font-size-base;
                    content: '\e900';
                }
            }

            .folder-open {
                display: none;

                &::before {
                    font-size: $farris-font-size-base;
                    content: '\e901';
                }
            }

            .file {
                display: none;

                &::before {
                    font-size: $farris-font-size-base;
                    content: '\e906';
                    color: $f-theme-05;
                }
            }

        }
    }

}

.farris-treetable.fixed {
    overflow: hidden;

    .farris-treetable-tbody {
        tr td:first-child {
            border-left: 0;
        }

        tr td:last-child {
            border-right: 0;
        }

        tr:first-child td {
            border-top: 0;
        }
    }

    .farris-treetable-thead {
        th:first-child {
            border-left: 0;
        }

        th:last-child {
            border-right: 0;
        }

        tr:first-child th {
            border-top: 0;
        }
    }
}

// farris-lsection 在左侧模板样式
.farris-lsection {
    .farris-treetable {
        .table-bordered {
            border-width: 0;

            td {
                border-width: 0 0 1px 0;
            }
        }

        .farris-treetable-body {
            .table {
                &:not(.table-striped) {
                    tbody tr {
                        &:nth-of-type(#{$f-table-striped-order}) {
                            background-color: $f-table-accent-bg;
                        }

                        &.farris-table-selectedrow {
                            background-color: $farris-grid-selected-bg;
                            color: $farris-grid-selected-text;
                        }
                    }
                }
            }
        }
    }
}

//Treetable 新增属性 数据折行
.farris-treetable-nowrap .farris-treetable-tbody td {
    word-break: break-all;
    white-space: break-spaces;
}

/*边线*/
.farris-treetable .farris-treetable-tbody td {
    padding: 0;
}

.treetable-lines {
    width: 8px;
    min-width: 8px;
    display: inline-block;
    border: 0;
    border-right: 1px dashed transparent;
}

.treetable-cell-content {
    width: 100%;
    padding: 0;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    height: 100%;
}

.treetable-cell-content .text {
    line-height: 1.75rem;
}

.treetable-lines-leaf {
    position: relative;
    margin-right: 5px;
}

.treetable-lines-leaf .normal {
    position: absolute;
    height: 50%;
    width: 100%;
    border-bottom: 1px dashed transparent;
}

.treetable-lines-leaf .corner {
    position: absolute;
    height: 50%;
    width: 9px;
    border-bottom: 1px dashed transparent;
    border-left: 1px dashed transparent;
    left: -1px;
}

.treetable-lines-leaf .normal.treetable-lines-border-color {
    border-bottom-color: #ccc;
}

.treetable-lines-leaf .corner.treetable-lines-border-color {
    border-bottom-color: #ccc;
    border-left-color: #ccc;
}

.treetable-lines-border-color {
    border-color: #ccc;
}

.farris-treetable-showlines .treetable-lines-border-color,
.farris-treetable-showlines .normal.treetable-lines-border-color,
.farris-treetable-showlines .corner.treetable-lines-border-color {
    border-color: transparent;
}

.farris-treetable-showlines:hover .treetable-lines-border-color,
.farris-treetable-showlines:hover .normal.treetable-lines-border-color,
.farris-treetable-showlines:hover .corner.treetable-lines-border-color {
    border-color: #ccc;
}

// 选择的问题
.f-cmp-treetable-toggler {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;

    .treetable-toggler {
        position: relative;
        z-index: 10;
    }

    .tree-toggler-checkbox {
        display: inline-block;
        line-height: 1;

        .tt-checkbox {
            min-height: 14px;

            .custom-control-label::before {
                top: 0;
            }
        }
    }

    .tree-icon-line {
        border-left: 1px dashed #ccc;
        position: absolute;
        left: 8px;
        top: 0;
        height: 100%;
        margin-left: -1px;
        z-index: 5;
        width: 1px;

        &.line-only-top {
            top: 0;
            height: 50%;
        }

        &.line-only-bottom {
            top: auto;
            height: 50%;
            bottom: 0;
        }
    }

}

.farris-treetable-showlines .f-cmp-treetable-toggler .tree-icon-line {
    border-color: transparent;
}

.farris-treetable-showlines:hover .f-cmp-treetable-toggler .tree-icon-line {
    border-color: #ccc;
}